<template>
  <div>
    <el-card style="position: relative;">
      <el-tabs v-model="activeName" @tab-change="tabChange">
        <el-tab-pane label="模板属性" name="first">
          <mbsx style="height: 100%" />
        </el-tab-pane>
        <el-tab-pane label="引用规则" name="second">
          <yygz ref="yygzRef" />
        </el-tab-pane>
        <el-tab-pane label="公式管理" name="third">
          <gsgl ref="gsglRef" />
        </el-tab-pane>
        <el-tab-pane label="控件选择" name="fourth">
          <kjxz v-if="activeName == 'fourth'" />
        </el-tab-pane>
        <el-tab-pane label="脚本配置" name="fifth">
          <jbpz v-if="activeName == 'fifth'" />
        </el-tab-pane>
      </el-tabs>
      <div style="position: absolute; bottom: 0;width: 100%; padding-right: 10px;height: 40px;
          text-align: right;z-index: 2000;">
        <el-button type="success" link @click="contractClick" style="line-height: 40px;">
          <el-icon>
            <DArrowLeft />
          </el-icon>收起
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import bus from "@/utils/eventBus";
import mbsx from "@/views/templateEditor/leftAreaTabs/mbsx.vue";
import yygz from "@/views/templateEditor/components/yygz.vue";
import gsgl from "@/views/templateEditor/labTemple/leftAreaTabs/gsgl.vue";
import kjxz from "@/views/templateEditor/components/kjxz.vue";
import jbpz from "@/views/templateEditor/leftAreaTabs/jbpz.vue";

const gsglRef = ref(null);
const yygzRef = ref(null);
const activeName = ref("first");

function contractClick() {
  bus.emit("contractClick", "left");
}

function tabChange(name) {
  if (name == "second") {
    yygzRef.value?.getMountedHeight();
  } else {
    yygzRef.value?.getUnmountHeight();
  }
  if (name == "third") {
    gsglRef.value.getMountedHeight();
  } else {
    gsglRef.value.getUnmountHeight();
  }
}
</script>

<style scoped>
:deep(.el-tabs__item) {
  padding: 0 5px !important;
}

:deep(.el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
  padding-left: 0 !important;
}

:deep(.el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--top .el-tabs__item.is-top:last-child) {
  padding-right: 0 !important;
}
</style>
